<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      id="nav-bar"
      :is-back="true"
      :background="{ background: '#fff' }"
      :border-bottom="false"
      title="我的收货地址"
    ></u-navbar>

    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      top="0"
      @down="downCallback"
      :up="upOption"
      @up="upCallback"
    >
      <view class="address-list">
        <u-radio-group v-model="defaultAddr" @change="radioGroupChange">
          <view class="address-item" v-for="res in siteList" :key="res.id">
            <!-- @click="handleAddressDetail(res.id)" -->
            <view class="address-top">
              <u-icon name="map" :size="40" color="#231815"></u-icon>
              <view class="center">
                <view class="item-top">
                  <!-- <view v-if="res.isDefault" class="label">默认</view> -->
                  <view class="name">{{ res.name }}</view>
                  <view class="phone">{{ res.phone }}</view>
                  <!-- <view class="tag">
                    <text
                      v-for="(item, index) in res.tag"
                      :key="index"
                      :class="{ red: item.tagText == '默认' }"
                      >{{ item.tagText }}</text
                    >
                  </view> -->
                </view>
                <view class="item-bottom">
                  {{ res.province }} {{ res.city }} {{ res.region }}
                  {{ res.address }}
                </view>
              </view>
              <u-icon
                name="edit-pen"
                :size="40"
                color="#CCCCCC"
                @click="handleAddressEdit(res.id)"
              >
              </u-icon>
            </view>
            <view class="address-bottom">
              <u-radio
                @change="radioChange"
                :name="res.id"
                shape="square"
                active-color="#CC921F"
              >
                默认地址
              </u-radio>
              <view class="delBtn" @click="handleDel(res.id)">删除</view>
            </view>
          </view>
        </u-radio-group>
      </view>
    </mescroll-body>

    <view class="bottom">
      <view class="bottom-btn" @click="handleAddAddr">添加收货地址</view>
    </view>
    <u-modal
      v-model="showModal"
      ref="uModal"
      title="提示"
      content="确认要删除该地址吗？"
      :show-cancel-button="true"
      confirm-text="确定"
      confirmColor="#ff2a00"
      @confirm="modalConfirm"
    >
    </u-modal>
  </view>
</template>
<script>
import service from '@/common/service.js';
import { showToast } from '@/common/utils';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';

export default {
  mixins: [MescrollMixin],
  data() {
    return {
      defaultAddr: 1,
      siteList: [],
      upOption: {
        page: {
          num: 0,
          size: 10,
        },
        noMoreSize: 5,
        empty: {
          tip: '',
        },
      },
      mescroll: null,
      showModal: false,
      currentId: '',
    };
  },
  onLoad() {},
  onShow() {
    if (this.mescroll) {
      this.mescroll.resetUpScroll();
    }
  },
  methods: {
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    downCallback() {
      this.siteList = [];
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      this.getData(page);
    },
    getData(page) {
      const that = this;
      const params = {
        pageNumber: page.num,
        pageSize: page.size,
      };
      service.getAddressList(
        params,
        function (res) {
          if (res && res.data) {
            that.mescroll.endSuccess(res.data.data.length);
            if (page.num == 1) that.siteList = [];
            that.siteList = that.siteList.concat(res.data.data);
            res.data.data.forEach((item) => {
              if (item.isDefault) {
                that.defaultAddr = item.id;
              }
            });
          }
        },
        function (res) {}
      );
    },
    radioChange(e) {},
    radioGroupChange(e) {
      const params = {
        id: e,
      };
      service.setDefaultAddress(
        params,
        function (res) {
          if (res && res.data) {
            showToast('设置成功');
          } else {
            showToast('设置失败');
          }
        },
        function (res) {}
      );
    },
    handleAddressDetail(id) {
      uni.navigateTo({
        url: '/pages/address/addAddress?type=detail&id=' + id,
      });
    },
    handleAddressEdit(id) {
      uni.navigateTo({
        url: '/pages/address/addAddress?type=edit&id=' + id,
      });
    },
    handleAddAddr() {
      uni.navigateTo({
        url: '/pages/address/addAddress?type=add',
      });
    },
    modalConfirm() {
      const that = this;
      const params = {
        id: this.currentId,
      };
      service.deleteAddress(
        params,
        function (res) {
          if (res && res.data) {
            showToast('删除成功');
            that.mescroll.resetUpScroll();
          } else {
            showToast(res.message);
          }
        },
        function (res) {}
      );
    },
    handleDel(id) {
      this.currentId = id;
      this.showModal = true;
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
}

.container {
  width: 100%;
  min-height: 100vh;
  padding: 30rpx 30rpx 120rpx;
  text-align: center;
  background-color: #f7f7f7;
}

.address-list {
  width: 100%;

  .address-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffffff;
    margin-bottom: 40rpx;
    padding: 30rpx 20rpx;
    width: 100%;
    border-radius: 10rpx;
    .address-top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #e6e6e6;
      .center {
        flex: 1;
        padding: 0 20rpx;
        .item-top {
          display: flex;
          font-weight: bold;
          font-size: 34rpx;
          .label {
            margin-right: 20rpx;
            width: 60rpx;
            height: 34rpx;
            line-height: 34rpx;
            color: #ffffff;
            font-size: 20rpx;
            border-radius: 6rpx;
            text-align: center;
            background-color: #ff4019;
          }
          .name {
            font-size: 26rpx;
            color: #2f2f2f;
          }
          .phone {
            margin-left: 20rpx;
            font-size: 26rpx;
            color: #2f2f2f;
          }
          .tag {
            display: flex;
            font-weight: normal;
            align-items: center;
            text {
              display: block;
              width: 60rpx;
              height: 34rpx;
              line-height: 34rpx;
              color: #ffffff;
              font-size: 20rpx;
              border-radius: 6rpx;
              text-align: center;
              margin-left: 30rpx;
              background-color: rgb(49, 145, 253);
            }
            .red {
              background-color: #ff4019;
            }
          }
        }
        .item-bottom {
          display: flex;
          margin-top: 20rpx;
          font-size: 24rpx;
          justify-content: space-between;
          color: #999999;
        }
      }
    }

    .address-bottom {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 30rpx 0 0;
      /deep/ .u-radio__label {
        font-size: 24rpx;
      }
      .delBtn {
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
      }
    }
  }
}

.bottom {
  position: fixed;
  left: 0;
  bottom: 60rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 30rpx;
  .bottom-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #ffffff;
    background: linear-gradient(90deg, #332108, #201403);
    border-radius: 20rpx;
  }
}
</style>
